<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			flex-grow
				如果没有flex-basic，就用width代替。
				如果有flex-basic，那么就无视width。
				可用空间 = 容器大小 - 所有相邻项目的flex-basic总和
				可扩展空间 = 可用空间/所有相邻项目flex-grow的数量的总和
				每项伸缩大小= flex-basic+可扩展空间*flex-grow
			*/

			* {
				margin: 0;
				padding: 0;
			}

			#wrap_old>.item,			
			#wrap_new>.item,
			#wrap_new_2>.item{
				width: 50px;
				/* height: 50px; */
				background: pink;
				text-align: center;
				line-height: 50px;
				/*
				这个属性叫做 弹性因子
				旧版本的，将多余的富裕空间分配到项目中
				*/
				/* -webkit-box-flex: 1; */

				/*新版本的弹性因子*/
				/* flex-grow: 1; */
			}

			#wrap_old>.item:nth-child(1) {
				/*
				默认值0
				弹性因子，要和其他的  -webkit-box-flex  一起设定
				*/
				-webkit-box-flex: 4;
			}

			#wrap_new>.item:nth-child(1) {
				/*
				默认值0
				新版本的弹性因子
				*/
				flex-grow: 4;
			}

			#wrap_old {
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;

				/* 这是flex的老版本 */
				display: -webkit-box;
				/*主轴方向*/
				-webkit-box-orient: horizontal;
				/*
				这个是确定主轴方向和元素的排列方向
				项目在主轴的正方向上排列
				*/
				-webkit-box-direction: normal;
				/*
				主轴的富裕空间管理，
				
				start 富裕空间在右边
				end 富裕空间在左边
				center 富裕空间在两边
				justify 内容之间的等分间隔
				
				这里注意和新版本的 flex-direction 对比
				
				老版本的富裕空间，不会根据主轴方向改变。
				*/
				-webkit-box-pack: start;
				/*
				侧轴的富裕空间管理，
			    end 侧轴的富裕空间在上面
				依次类推
			   */
				-webkit-box-align: center;
				
				/*
				老版本，在同一个容器中是不会换行的。
				新版本中可以。
				*/
			}

			#wrap_new {
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;

				/* 这是flex的新版本 */
				display: flex;
				/*新版本的设置主轴的方向*/
				flex-direction: row;

				/*
				主轴的富裕空间管理，
				
				flex-start 富裕空间在主轴的正方向				
				flex-end 富裕空间在主轴的反方向
				center 富裕空间在主轴的两边
				space-around 内容之间的等分间隔
				space-between 内容之间的等分间隔，两头肯定会紧贴边框
				
				这里和老版本是不一样的
				*/
				justify-content: flex-start;

				/*
				侧轴的富裕空间管理，
			   justify-content: flex-start;
			            flex-start
			            flex-end
			            center
			            space-between
			            space-around(box 没有的)
			              
			   更强大的富裕空间的管理（侧轴）
			   align-items: stretch;
			            flex-start
			            flex-end
			            center
			            baseline(box 没有的) 按基线对齐
			            stretch(box 没有的) 拉伸效果 没有高度，才会有等高布局的效果
			   */
				align-items: flex-start;
			}
			
			#wrap_new_2{
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;
				
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				
				/*
				效果是 换行
				侧轴的方向控制
				*/
				flex-wrap: wrap;
				/*
				每行中的item对齐方式
				*/
				align-items: flex-start;
				/*
				这是一个行对齐，也是管理富裕空间的
				这个和 align-self: flex-end; 是冲突的
				*/
				/* align-content: flex-end; */
				
			}
			
			#wrap_new_2>.item:nth-child(1){
				/* 这个是用来控制排列顺序的 */
				order: 2;
				/*这个是自己管理侧轴的富裕空间*/
				align-self: flex-end;
				/*设置当前box的宽度，如果有box-sizing就使用box-sizing*/
				flex-basis: auto;
			}
			#wrap_new_2>.item:nth-child(2){
				/* 这个是用来控制排列顺序的 */
				order: 5;
			}
		</style>
	</head>
	<body>
		<!-- <div id="wrap_old"> -->
		<!-- <div id="wrap_new"> -->
		<div id="wrap_new_2">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
